<template>
  <div class="eject-box" v-if="isVisible">
    <div class="eject-box-container">
      <p class="eject-title">{{ejectTitle}}</p>
      <a-icon @click="close" class="eject-close" type="close" />
      <slot/>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    isVisible:{
      type: Boolean,
      default: false
    },
    ejectTitle:{
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },
  methods: {
    close() {
      this.$emit('update:isVisible',false)
    }
  },
}
</script>
<style lang="less" scoped>
.eject-box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(000, 000, 000, 0.5);
  .eject-box-container {
    width: 1028px;
    height: 688px;
    position: absolute;
    background: #f5f5f5;
    border-radius: 4px;
    top: 50%;
    left: 50%;
    padding: 0 16px;
    transform: translate(-50%,-50%);
    .eject-close {
      position: absolute;
      right: 17px;
      top: 17px;
      cursor: pointer;
    }
  }
  .eject-title {
    color: @colorCommonFont;
    font-size: 16px;
    position: absolute;
    top: 16px;
    left: 32px;
  }
  
}
</style>